<template>
	<div class="pagetab">
		<router-link :to="item.url" v-for="(item,index) in navs" :key="index">
			<div :class="['item',item.class,$route.path==item.url?'item-active':'']">{{ item.title }}</div>
		</router-link>
	</div>
</template>

<script>
	export default {
		props: {},
		data() {
			return {
				navs: [{
						id: '1',
						title: '总览',
						url: '/index',
						class: 'item-left1'
					},
					{
						id: '2',
						title: '实验地分布',
						url: '/plot',
						class: 'item-left2'
					},
					{
						id: '3',
						title: '品种选育',
						url: '/vari',
						class: 'item-left3'
					},
					{
						id: '4',
						title: '栽培技术',
						url: '/plant',
						class: 'item-right1'
					},
					{
						id: '5',
						title: '病虫害防治',
						url: '/diseasePest',
						class: 'item-right2'
					},
				]
			}
		}
	}
</script>